HTML, CSS, এবং JavaScript এর বেসিক

Computer Science - ইন্টারনেট টেকনোলজিস (Internet Technologies) - ওয়েব টেকনোলজি (Web Technology)

390

HTML, CSS, এবং JavaScript এর বেসিক

HTML, CSS, এবং JavaScript হলো ওয়েব ডেভেলপমেন্টের প্রধান তিনটি উপাদান। এদের সংমিশ্রণেই একটি পূর্ণাঙ্গ ওয়েব পেজ তৈরি হয়। HTML ওয়েব পেজের গঠন বা স্ট্রাকচার তৈরিতে ব্যবহৃত হয়, CSS ওয়েব পেজের স্টাইলিং এবং ডিজাইনের জন্য, আর JavaScript ওয়েব পেজে ইন্টার‍্যাকশন বা গতিশীলতা আনতে ব্যবহৃত হয়।

HTML (HyperText Markup Language)

HTML হলো ওয়েব পেজের ভিত্তি, যা ওয়েব পেজের মূল কাঠামো তৈরি করতে ব্যবহৃত হয়। এটি বিভিন্ন ট্যাগের মাধ্যমে একটি ওয়েব পেজের বিভিন্ন অংশ যেমন হেডিং, প্যারাগ্রাফ, ইমেজ, এবং লিংক নির্ধারণ করে।

HTML ট্যাগসমূহ: HTML এ বিভিন্ন ট্যাগ রয়েছে যেমন <html>, <head>, <body>, <h1>, <p>, <a>, ইত্যাদি।

ট্যাগ উদাহরণ:

<!DOCTYPE html>
<html>
    <head>
        <title>My First Webpage</title>
    </head>
    <body>
        <h1>Welcome to My Website</h1>
        <p>This is a paragraph in HTML.</p>
        <a href="https://www.example.com">Click here</a>
    </body>
</html>

প্রধান HTML ট্যাগ:
- <html>: এটি HTML ডকুমেন্টের রুট এলিমেন্ট।
- <head>: পেজের মেটাডেটা, যেমন টাইটেল এবং লিংক, এখানে থাকে।
- <body>: এখানে সমস্ত দৃশ্যমান কন্টেন্ট যেমন হেডিং, প্যারাগ্রাফ থাকে।

CSS (Cascading Style Sheets)

CSS একটি স্টাইল শীট ভাষা, যা HTML এ তৈরি কন্টেন্টকে ডিজাইন এবং স্টাইল করতে ব্যবহৃত হয়। CSS এর মাধ্যমে ফন্ট, কালার, লেআউট এবং অন্যান্য ডিজাইন পরিবর্তন করা যায়, যা ওয়েব পেজকে আরও আকর্ষণীয় করে তোলে।

CSS এর উদাহরণ:

body {
    background-color: lightblue;
}
h1 {
    color: navy;
    font-family: Arial, sans-serif;
    text-align: center;
}
p {
    font-size: 16px;
    color: darkslategray;
}

CSS যোগ করার পদ্ধতি:
- ইনলাইন স্টাইলিং: HTML ট্যাগে style এট্রিবিউট ব্যবহার করে।
```
<p style="color: blue;">This is a styled paragraph.</p>
```
- ইন্টারনাল স্টাইল শীট: HTML এর <style> ট্যাগের মধ্যে CSS কোড যোগ করা হয়।
```
<style>
    p {
        color: green;
    }
</style>
```
- এক্সটারনাল স্টাইল শীট: একটি আলাদা CSS ফাইলে স্টাইল কোড রাখা হয়, যা HTML ফাইলে লিংক করে।
```
<link rel="stylesheet" href="style.css">
```
CSS সিলেক্টর এবং প্রোপার্টি:
- সিলেক্টর: CSS এর সিলেক্টর নির্ধারণ করে কোন HTML এলিমেন্টে স্টাইল প্রয়োগ করা হবে।
- প্রোপার্টি: CSS প্রোপার্টি নির্ধারণ করে কিভাবে স্টাইল করা হবে। যেমন color, font-size, background-color ইত্যাদি।

JavaScript

JavaScript একটি প্রোগ্রামিং ভাষা, যা ওয়েব পেজে ইন্টার‍্যাকশন এবং গতিশীলতা যোগ করতে ব্যবহৃত হয়। JavaScript এর মাধ্যমে ওয়েব পেজের বিভিন্ন উপাদানকে নিয়ন্ত্রণ করা যায় এবং ব্যবহারকারীর কার্যকলাপ অনুযায়ী পেজের আচরণ পরিবর্তন করা সম্ভব।

JavaScript এর উদাহরণ:

// এই স্ক্রিপ্ট একটি পেজ লোড করার পর একটি এলার্ট দেখাবে
alert("Welcome to my website!");

// বাটন ক্লিকের মাধ্যমে HTML উপাদান পরিবর্তন
function changeText() {
    document.getElementById("myText").innerHTML = "Text has been changed!";
}

JavaScript প্রয়োগ করার পদ্ধতি:
- ইন্টারনাল স্ক্রিপ্ট: HTML ফাইলে <script> ট্যাগের মধ্যে JavaScript কোড যোগ করা।
```
<script>
    console.log("Hello, World!");
</script>
```
- এক্সটারনাল স্ক্রিপ্ট: JavaScript কোড একটি আলাদা .js ফাইলে রাখা হয়, এবং HTML ফাইলে তা লিংক করা হয়।
```
<script src="script.js"></script>
```
JavaScript এর কাজ:
- DOM ম্যানিপুলেশন: JavaScript এর মাধ্যমে HTML ডকুমেন্টের বিভিন্ন এলিমেন্টকে নিয়ন্ত্রণ এবং পরিবর্তন করা যায়।
- ইভেন্ট হ্যান্ডলিং: ব্যবহারকারীর ক্লিক, মাউস ওভার, এবং কিবোর্ড প্রবেশের মতো ইভেন্টগুলি পরিচালনা করা যায়।
- ফর্ম ভ্যালিডেশন: ব্যবহারকারীর ইনপুট যাচাই করা যায়, যা ফর্ম জমা দেওয়ার আগে ডাটা চেক করে।
- API ইন্টিগ্রেশন: JavaScript এর মাধ্যমে অন্যান্য সিস্টেম বা সার্ভিসের সাথে সংযোগ স্থাপন করা যায়, যেমন: RESTful API, AJAX কল ইত্যাদি।

HTML, CSS, এবং JavaScript এর মধ্যে সম্পর্ক

HTML: পেজের গঠন তৈরি করে এবং বিষয়বস্তু উপস্থাপন করে।
CSS: HTML এর বিষয়বস্তু স্টাইল করে এবং পেজের লেআউট ও ডিজাইন নির্ধারণ করে।
JavaScript: পেজের ইন্টার‍্যাকশন এবং গতিশীল কার্যকলাপের জন্য ব্যবহার করা হয়।

এই তিনটি ভাষা একত্রে একটি পূর্ণাঙ্গ ওয়েব পেজ তৈরি করে, যেখানে HTML বিষয়বস্তুর কাঠামো তৈরি করে, CSS সেই কাঠামোকে সুন্দর এবং আকর্ষণীয় করে তোলে, এবং JavaScript ব্যবহারকারীর সাথে ইন্টার‍্যাকশন যোগ করে পেজকে গতিশীল করে তোলে।

Content added By

Md Azizar Rahman Aziz

ওয়েব সার্ভার এবং ক্লায়েন্ট এর ভূমিকা ওয়েব ব্রাউজার এবং সার্চ ইঞ্জিন কিভাবে কাজ করে ফ্রন্ট-এন্ড এবং ব্যাক-এন্ড টেকনোলজির পার্থক্য

HTML, CSS, এবং JavaScript এর বেসিক